<script>
import { basicnum } from "@/api/user";
import * as echarts from "echarts";
export default {
  data() {
    return {
      annualIncome: 0,
      enterpriseTotal: 0,
      monthCardTotal: 0,
      chargePoleTotal: 0,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      const res = await basicnum();
      console.log(res, "res");
      this.annualIncome = res.data.annualIncome;
      this.enterpriseTotal = res.data.enterpriseTotal;
      this.monthCardTotal = res.data.monthCardTotal;
      this.chargePoleTotal = res.data.chargePoleTotal;
      this.getchart(res.data.annualIncomeArray);
    },
    getchart(arr) {
      let arr1 = [];
      for (var i = 0; i < arr.ybuilding.length; i++) {
        for (var j = 0; j < arr.yparking.length; j++) {
          arr1.push(arr.ybuilding[i] + arr.yparking[j]);
        }
      }
      const chart = echarts.init(document.getElementById("ndchart"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: true,
          data: ["园区收入", "车行收入"],
        },
        xAxis: {
          type: "category",
          data: arr.xmonth,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "园区收入",
            data: arr.ybuilding,
            type: "bar",
          },
          {
            name: "车行收入",
            data: arr.yparking,
            type: "bar",
          },
          {
            name: "总数",
            data: arr1,
            itemStyle: {
              normal: {
                color: "rgba(128, 128, 128, 0)", // 柱状图颜色设为透明
              },
            },
            type: "bar",
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<template>
  <div class="databoardcontainer">
    <div class="left">
      <div class="yqsj">
        <p>园区数据</p>
        <div class="basicnum">
          <div class="numlist">
            <p>年度累计收费（元）</p>
            <div class="num">{{ annualIncome }}</div>
          </div>
          <div class="numlist">
            <p>入驻企业总数（个）</p>
            <div class="num">{{ enterpriseTotal }}</div>
          </div>
          <div class="numlist">
            <p>月卡车辆总数（辆）</p>
            <div class="num">{{ monthCardTotal }}</div>
          </div>
          <div class="numlist">
            <p>一体杆总数（台）</p>
            <div class="num">{{ chargePoleTotal }}</div>
          </div>
        </div>
      </div>
      <div class="yqsj">
        <p>年度收入统计</p>
        <div class="ndchart" id="ndchart"></div>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>
<style scoped lang="scss">
.ndchart {
  width: 100%;
  height: 300px;
}
.numlist p {
  color: #909399;
  font-size: 14px;
}
.numlist {
  width: 25%;
  height: auto;
  float: left;
}
.basicnum {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.databoardcontainer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  overflow: auto;
}
.left {
  width: 70%;
  height: 100%;
}
.right {
  width: calc(30% - 20px);
  height: 100%;
}
.yqsj {
  width: 100%;
  height: auto;
  padding: 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
}
</style>
